<template>
  <div class="news">
    <div class="news-list">
      <a
        :href="v.newsUrl"
        class="news-item"
        v-for="v,i in list"
        :key="i"
        target="_blank"
      >
        <div class="news-img">
          <van-image
            class="img"
            :src="v.newsImg"
          >
          </van-image>
        </div>
        <div class="news-info">
          <h3 class="h3 omit">
            {{v.title}}
          </h3>
          <div class="bottom">
            {{ v.createTime | formatTime }} 来源：{{ v.source }}
          </div>
        </div>
      </a>

    </div>
  </div>
</template>

<script>
import { findAllNew } from '@/api/index'
import { getFormat } from '@/utils/formatTime'
export default {
  name: "",
  data() {
    return {
      list: [],
    };
  },
  filters: {
    // 处理时间
    formatTime(time) {
      return getFormat(time)
    }
  },
  mounted() {
    this.getAllNews()
  },
  methods: {
    // 获取新闻列表数据
    async getAllNews() {
      try {
        const res = await findAllNew()
        this.list = res
      } catch(err) {
        console.log(err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.news {
  .news-list {
    padding: 0 15px;
  }

  .news-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid rgba($color: #3e464f, $alpha: 0.25);
  }

  .news-img {
    width: 130px;

    .img {
      width: 130px;
    }
  }

  .news-info {
    position: relative;
    margin-left: 15px;
    color: #3f4650;

    h3 {
      font-size: 14px;
    }

    .bottom {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 12px;
      text-align: right;
    }
  }
  .omit {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}
</style>
